<script lang="ts" setup>
import aj from './aj/index.vue'
import ysp from './ysp/index.vue'
import ajwsgl from './ajwjgl/index.vue'
import yspwjgl from './yspwjgl/index.vue'
import ajxx from './aj/components/ajxx.vue'
import mlxx from './aj/components/mlxx.vue'
import ryxx from './aj/components/ryxx.vue'
import yspxx from './ysp/components/yspxx.vue'
import { useRoute } from 'vue-router'
import wsjzglService from '@/api/wsjzgl'
import yspglService from '@/api/yspgl'
import gdglService from '@/api/gdgl'
import ajjcdService from '@/api/ajjcsd'
import { ref, onMounted, nextTick, computed, watch } from 'vue'
import { useMainStore } from '@/store/main'
import { mlxxMainStore } from '@/store/mlxx'
import { ElMessage } from 'element-plus'
import router from '@/router'
import { getFldm } from '@/utils/get-fldm'
import jiesuoImg from '@/assets/images/jiesuomoren.png'
import jiasuoImg from '@/assets/images/jiasuomoren.png'
// 获取ref
const ajwsglRef = ref()
const ajAjxxRef = ref()
const ajRyxxRef = ref()
const ajMlxxRef = ref()
const yspxxRef = ref()
const ajRef = ref()
const yspRef = ref()
const yspwjglRef = ref()
const dzjzRef = ref()
const route = useRoute()
const store = useMainStore()
const mlxxStore = mlxxMainStore()
// 入参

// 生命周期
onMounted(() => {
  handleClick('first')
  // 归档阶段分类代码
  // rightTabChangeTabs('ajxx')
  getGdjd()
  // 归档状态查询
  getAjzt()
  // 检测状态字典查询
  getJczt()
  // 判断锁定状态
  getShowUnlock()
})

const getShowUnlock = () => {
  const query: any = route.query
  if (query.sfsd === 'Y') {
    if (query.sdrid === store.userInfo.ryid) {
      mlxxStore.saveReadOnly(true)
    } else {
      mlxxStore.saveReadOnly(false)
    }
  } else {
    mlxxStore.saveReadOnly(false)
  }
}

watch(
  () => route.query.sfsd,
  () => {
    getShowUnlock()
  },
)
// 归档状态查询
const getAjzt = () => {
  const params = {
    ajbh: route.query.ajbh,
  }
  gdglService
    .getAjzt(params)
    .then((res) => {
      mlxxStore.savegdztData(res.data)
      jczt.value = (res.data.jcztdm as string) || 'gd0110001'
      if (jczt.value === 'gd0110004') {
        queryAjjcmxjl()
      }
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

// 检测状态
const jcztMap = ref<{ [key: string]: string }>({})
const getJczt = async () => {
  const list = await getFldm('gd011')
  list.forEach((el: { dm: string; mc: string }) => {
    jcztMap.value[el.dm] = el.mc
  })
}
const jczt = ref('gd0110001')

// 点击检测不通过查询检测结果
const jcmxjlList = ref<any[]>([])
const queryAjjcmxjl = () => {
  const params = {
    ajbh: route.query.ajbh as string,
  }
  gdglService
    .queryAjjcmxjl(params)
    .then((res) => {
      jcmxjlList.value = res.data
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

// 归档阶段分类代码
const gdjdList = ref<any>([])
const getGdjd = async () => {
  gdjdList.value = await getFldm('gd018')
}
// 加锁操作
const sdrId = ref(route.query.sdrid)
const lockAjClick = () => {
  const params = {
    ajbh: route.query.ajbh as string,
    bmsah: route.query.bmsah as string,
  }
  ajjcdService
    .querylockAj(params)
    .then((res) => {
      if (res.data) {
        if (!route.query.sdrid) {
          sdrId.value = store.userInfo.ryid
        } else {
          sdrId.value = route.query.sdrid
        }
        ElMessage({ type: 'success', message: '加锁成功' })
        router.push({
          path: '/jzsmzl',
          query: {
            ...route.query,
            sfsd: 'Y',
            sdrid: sdrId.value,
          },
        })
      }
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

// 解锁操作
const unlockAjClick = () => {
  if (sdrId.value !== store.userInfo.ryid)
    return ElMessage({ type: 'warning', message: '解锁人与锁定人不一致' })
  const params = [
    {
      ajbh: route.query.ajbh as string,
      bmsah: route.query.bmsah as string,
    },
  ]
  ajjcdService
    .queryUnlockAj(params)
    .then((res) => {
      if (res.data) {
        getAjzt()
        // if (activeName.value === 'first') {
        //   wjlxChange()
        // }
        // if (activeName.value === 'second') {
        //   ysplbChangeEvent()
        // }
        ElMessage({ type: 'success', message: '解锁成功' })
        router.push({
          path: '/jzsmzl',
          query: {
            ...route.query,
            sfsd: 'N',
            sdrid: sdrId.value,
          },
        })
      }
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

const buttonList = computed(() => [
  {
    url: jiasuoImg,
    name: '加锁',
    disabled:
      route.query.sfsd === 'Y' && route.query.sdrid === store.userInfo.ryid
        ? true
        : route.query.sfsd === 'Y' && route.query.sdrid !== store.userInfo.ryid
        ? false
        : false,
    click: lockAjClick,
  },
  {
    url: jiesuoImg,
    name: '解锁',
    disabled:
      route.query.sfsd === 'Y' && route.query.sdrid === store.userInfo.ryid
        ? false
        : route.query.sfsd === 'Y' && route.query.sdrid !== store.userInfo.ryid
        ? true
        : true,
    click: unlockAjClick,
  },
])

/*
 * 返回
 */
const goBack = () => {
  router.push({
    path: route.query.route as string,
  })
}

const activeName = ref('first')
const handleClick = (tab: any) => {
  switch (tab) {
    case 'first':
      ajRef.value?.init()
      break
    case 'second':
      yspRef.value?.init()
      break
    case 'third':
      dzjzRef.value?.init()
      break
    default:
      break
  }
}

const leftSmall = ref<boolean>(false)
const rightSmall = ref<boolean>(false)

const dragFlag = ref<boolean>(false)
const moveLenLeft = ref<number>(0)
const moveLenRight = ref<number>(0)
/*
 * 拖拽事件
 */
// 初始距离
// 是否按下
const dragstart = () => {
  dragFlag.value = true
}
const dragLeft = (e: any) => {
  if (!dragFlag.value) {
    return
  }
  if (e.clientX && e.clientX - 16 <= 330) {
    moveLenLeft.value = 330
  } else if (e.clientX && e.clientX - 16 >= 460) {
    moveLenLeft.value = 460
  } else {
    moveLenLeft.value = e.clientX - 16
  }
}
const screenRef = ref<any>()
const dragRight = (e: any) => {
  const screenWidth = JSON.parse(JSON.stringify(screenRef.value.offsetWidth || 0))
  if (!dragFlag.value || !e.clientX) {
    return
  }
  if (screenWidth - e.clientX && screenWidth - e.clientX + 16 <= 300) {
    moveLenRight.value = 300
  } else if (screenWidth - e.clientX && screenWidth - e.clientX + 16 >= 400) {
    moveLenRight.value = 400
  } else {
    moveLenRight.value = screenWidth - e.clientX + 16
  }
}
const dragend = () => {
  dragFlag.value = false
}

const rightTabActiveName = ref('ajxx')

// 案卷传递过来方法
const nodeClick = (data: any, flag?: boolean) => {
  store.saveNodeTreeData(data)
  if (flag === undefined) {
    ajwsglRef.value.resetHeaderIndex()
    wjlxdm.value = 'gd0010001'
  }
  if (data.cj === '1') {
    // rightTabActiveName.value = 'ajxx'
    // rightTabChangeTabs('ajxx')
    rightTabActiveName.value = 'mlxx'
    rightTabChangeTabs('mlxx')
    if (!data.disabled) {
      getWjList(store.$state.nodeTreeData?.bh)
    } else {
      ajwsglRef.value.getWjxqxx([])
      ajwsglRef.value.getWjlx([])
    }
  } else if (data.cj === '2') {
    rightTabActiveName.value = 'mlxx'
    rightTabChangeTabs('mlxx')
    if (!data.disabled) {
      getWjList(store.$state.nodeTreeData?.bh)
    } else {
      ajwsglRef.value.getWjxqxx([])
      ajwsglRef.value.getWjlx([])
    }
  } else {
    ajwsglRef.value.getWjxqxx([])
    ajwsglRef.value.getWjlx([])
  }
  ajxxIsShowZzml.value = {}
}

// 音视频图片传递过来方法
const yspNodeClick = (data: any) => {
  store.saveNodeTreeData(data)
  yspwjglRef.value?.closeDetail()
  if (data.cj === 1 || !data.cj) {
    yspwjglRef.value?.getWjxqxx([])
    yspxxRef.value?.getWjxqxx([])
    return
  }
  // 判断
  if (data.fbh === 'gd0020002' || data.fbh === 'gd0020001') {
    getYspList()
  } else {
    getPhotoList()
  }
}

// 扫描完成
const updateJzsmwc = () => {
  const params = { jzsmjlbh: route.query.jzsmjlbh as string }
  gdglService
    .updateJzsmwc(params)
    .then(() => {
      ElMessage({ type: 'success', message: '操作成功' })
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

const wjlxdm = ref('gd0010001')
const wjlxChangeEvent = (data: string, valueList?: any) => {
  wjlxdm.value = data
  getWjList(store.$state.nodeTreeData?.bh, valueList)
}

// 刷新   删除 上传文件
const wjlxChange = () => {
  ajRef.value.againTreeData()
}

// 音视频刷新
const ysplbChangeEvent = () => {
  if (
    store.$state.nodeTreeData.fbh === 'gd0020002' ||
    store.$state.nodeTreeData.fbh === 'gd0020001'
  ) {
    getYspList()
    yspRef.value.againTreeData()
  } else {
    getPhotoList()
    yspRef.value.againTreeData()
  }
}

const rightTabChangeTabs = (tab: string) => {
  switch (tab) {
    case 'ajxx':
      if (!store.$state.nodeTreeData.cj || store.$state.nodeTreeData.mc === '待编目材料') return
      ajAjxxRef.value?.init()
      break
    case 'ryxx':
      if (!store.$state.nodeTreeData.cj) return
      ajRyxxRef.value?.init()
      break
    case 'mlxx':
      if (!store.$state.nodeTreeData.cj) return
      ajMlxxRef.value?.init()
      break
    default:
      break
  }
}

// 案卷复卷列表
const getWjList = (data: any, list?: any) => {
  const params = {
    ajbh: store.$state.nodeTreeData?.ajbh,
    mlbh: data,
    wjlxdm: wjlxdm.value,
    jcztdms: list ? list.map((item: any) => item.dm) : undefined,
  }
  wsjzglService
    .queryWjList(params)
    .then((res) => {
      nextTick(() => {
        ajwsglRef.value.getWjxqxx(res.data)
        ajwsglRef.value.getWjlx()
      })
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

// 音视频目录列表
const getYspList = () => {
  const params = {
    dabh: store.$state.nodeTreeData?.dabh,
    mlbh: store.$state.nodeTreeData?.bh,
  }
  yspglService
    .getYspmlxx(params)
    .then((res) => {
      nextTick(() => {
        yspwjglRef.value.getWjxqxx(res.data)
        yspxxRef.value.getWjxqxx(res.data)
      })
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

// 获取图片目录列表
const getPhotoList = () => {
  const params = {
    dabh: store.$state.nodeTreeData?.dabh,
    mlbh: store.$state.nodeTreeData?.bh,
  }
  yspglService
    .getZpmlxx(params)
    .then((res) => {
      nextTick(() => {
        yspwjglRef.value.getWjxqxx(res.data)
        yspxxRef.value.getWjxqxx(res.data)
      })
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

// 子组件传递过来的方法 -> 刷新
const refresh = () => {
  getWjList(store.$state.nodeTreeData?.bh)
  ajRef.value.againTreeData()
}
const refreshYsp = () => {
  ysplbChangeEvent()
}

// 案卷信息tab抛出来的方法
// 这个数据用来判断纸质目录是否禁用
const ajxxIsShowZzml = ref<any>({})
const isShowZzmlEvent = (data: any) => {
  ajxxIsShowZzml.value = data
}
</script>
<template>
  <div class="container" ref="screenRef">
    <div class="top">
      <div class="header">
        <div class="header-left">
          <img class="logo-img" src="@/assets/images/case.png" alt="" />
          <p>{{ route.query.ajmc }}</p>
          <p class="header-bmsah">【{{ route.query.bmsah }}】</p>
          <div class="header-jc wjc" v-if="jczt === 'gd0110001'">
            <el-icon size="14" color="#fff"><Warning /></el-icon>
            <span>{{ jcztMap[jczt] }}</span>
          </div>
          <div class="header-jc jcz" v-else-if="jczt === 'gd0110002'">
            <el-icon class="is-loading" size="14" color="#fff"><Loading /></el-icon>
            <span>{{ jcztMap[jczt] }}</span>
          </div>
          <div class="header-jc jctg" v-else-if="jczt === 'gd0110003'">
            <el-icon size="14" color="#fff"><CircleCheck /></el-icon>
            <span>{{ jcztMap[jczt] }}</span>
          </div>
          <el-popover
            v-else-if="jczt === 'gd0110004'"
            placement="right-start"
            :width="400"
            trigger="click"
            @show="queryAjjcmxjl"
          >
            <template #reference>
              <div class="header-jc jcbtg" title="查看检测结果">
                <el-icon size="14" color="#fff"><CircleClose /></el-icon>
                <span>{{ jcztMap[jczt] }}</span>
                <el-icon size="14" color="#fff"><InfoFilled /></el-icon>
              </div>
            </template>
            <el-table :data="jcmxjlList">
              <el-table-column width="150" property="jcxmc" label="检测项" />
              <el-table-column property="jcbtgyy" label="不通过原因" />
            </el-table>
          </el-popover>
        </div>

        <div class="header-right">
          <button
            class="buttonBox"
            v-for="(item, index) in buttonList"
            :key="index"
            @click="item.click"
            :disabled="item.disabled"
          >
            <img :src="item.url" alt="" />
            <div
              :style="{
                color: item.disabled ? '#b8bdc3' : '#fff',
                cursor: item.disabled ? 'not-allowed' : 'pointer',
              }"
            >
              {{ item.name }}
            </div>
          </button>
          <div style="cursor: pointer; margin: 0 20px" @click="updateJzsmwc">
            <el-icon style="vertical-align: -5px" size="20">
              <Check />
            </el-icon>
            扫描完成
          </div>
          <div style="cursor: pointer; margin-right: 15px" @click="goBack">
            <el-icon style="vertical-align: -5px" size="20">
              <Back />
            </el-icon>
            返回
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div
        class="left"
        :class="{ small: leftSmall }"
        :style="{ width: moveLenLeft ? moveLenLeft + 'px' : '' }"
      >
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-change="handleClick"
          type="card"
          v-show="!leftSmall"
        >
          <el-tab-pane label="案卷" name="first">
            <aj ref="ajRef" @nodeClick="nodeClick" :ajxxIsShowZzml="ajxxIsShowZzml" />
          </el-tab-pane>
          <el-tab-pane label="音像" name="second">
            <ysp ref="yspRef" @nodeClick="yspNodeClick" :gdjdList="gdjdList" />
          </el-tab-pane>
        </el-tabs>
        <div class="left-img" @click="leftSmall = !leftSmall">
          <img src="@/assets/images/zsq.png" alt="" v-if="!leftSmall" />
          <img src="@/assets/images/ysq.png" alt="" v-else-if="leftSmall" />
        </div>
      </div>
      <!--拖动div-->
      <div
        class="search-drag-box"
        :draggable="true"
        title="可左右拖动"
        @dragstart="dragstart()"
        @dragend="dragend()"
        @drag="dragLeft($event)"
      >
        <div class="dragImg">
          <el-icon class="dargIcon" color="#bdcae2"><MoreFilled /></el-icon>
        </div>
      </div>
      <div class="center">
        <ajwsgl
          ref="ajwsglRef"
          v-if="activeName === 'first'"
          @wjlxChangeEvent="wjlxChangeEvent"
          @wjlxChange="wjlxChange"
          :gdjdList="gdjdList"
        />
        <yspwjgl
          ref="yspwjglRef"
          v-if="activeName === 'second'"
          @ysplbChangeEvent="ysplbChangeEvent"
          :gdjdList="gdjdList"
        />
      </div>
      <!--拖动div-->
      <div
        class="search-drag-box"
        :draggable="true"
        title="可左右拖动"
        @dragstart="dragstart"
        @dragend="dragend"
        @drag="dragRight"
        v-if="activeName === 'first' || activeName === 'second'"
      >
        <div class="dragImg">
          <el-icon class="dargIcon" color="#bdcae2"><MoreFilled /></el-icon>
        </div>
      </div>
      <div
        v-if="activeName === 'first' || activeName === 'second'"
        class="right"
        :class="{ small: rightSmall }"
        :style="{ width: moveLenRight ? moveLenRight + 'px' : '' }"
      >
        <div class="right-img" @click="rightSmall = !rightSmall">
          <img src="@/assets/images/ysq.png" alt="" v-if="!rightSmall" />
          <img src="@/assets/images/zsq.png" alt="" v-else-if="rightSmall" />
        </div>

        <el-tabs
          v-if="activeName === 'first'"
          type="card"
          v-model="rightTabActiveName"
          @tab-change="rightTabChangeTabs"
        >
          <!-- <el-tab-pane label="案卷信息" name="ajxx">
            <ajxx ref="ajAjxxRef" :gdjdList="gdjdList" @isShowZzmlEvent="isShowZzmlEvent"></ajxx>
          </el-tab-pane>
          <el-tab-pane label="人员信息" name="ryxx">
            <ryxx ref="ajRyxxRef" :gdjdList="gdjdList"></ryxx>
          </el-tab-pane> -->
          <el-tab-pane label="目录信息" name="mlxx">
            <mlxx ref="ajMlxxRef" @refresh="refresh" :gdjdList="gdjdList"></mlxx>
          </el-tab-pane>
        </el-tabs>

        <el-tabs v-if="activeName === 'second'" type="card">
          <el-tab-pane label="音像信息">
            <yspxx ref="yspxxRef" @refresh="refreshYsp" :gdjdList="gdjdList"></yspxx>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;

  .top {
    .header {
      color: #fff;
      width: 100%;
      height: 50px;
      background-image: linear-gradient(0deg, #0093df 0%, #0057a0 100%);
      display: flex;
      justify-content: space-between;

      .header-left {
        display: flex;
        align-items: center;
        padding: 0 0 0 10px;
        font-size: 16px;
        .logo-img {
          margin: 0 8px;
        }
        .header-bmsah {
          color: #8bcbfd;
        }
        .header-jc {
          padding: 1px 5px;
          font-size: 12px;
          border-radius: 3px;
          display: flex;
          align-items: center;
          margin-top: 2px;
          span {
            padding-left: 3px;
          }
          &.wjc {
            background-color: #dc9632;
          }
          &.jctg {
            background-color: #09ad43;
          }
          &.jcbtg {
            background-color: #ff5050;
            cursor: pointer;
            span {
              padding-right: 3px;
            }
          }
          &.jcz {
            background-color: #00a5ef;
          }
        }
      }

      .header-right {
        height: 100%;
        width: 650px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 10px;
        .buttonBox {
          display: flex;
          align-items: center;
          padding: 0;
          margin-left: 20px;
          background-color: transparent;
          color: #fff;
          white-space: nowrap;
          font-size: 14px;
          cursor: pointer;
          img {
            padding-right: 5px;
          }
          &:focus {
            outline: none;
          }
        }
      }
    }
  }

  .content {
    width: 100%;
    height: calc(100vh - 50px);
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: #ecf1fa;

    .left {
      // width: 20%;
      width: 350px;
      height: 100%;
      // border: 1px solid red;
      position: relative;
      background-color: #fff;
    }

    .left > .left-img {
      position: absolute;
      right: 0;
      top: calc(50% - 27px);
      z-index: 9;
      cursor: pointer;
    }

    .center {
      flex: 1;
      flex-shrink: 0;
      background-color: #fff;
    }

    .right {
      width: 350px;
      height: 100%;
      position: relative;
      background-color: #fff;
    }

    .right > .right-img {
      position: absolute;
      left: 0;
      top: calc(50% - 27px);
      z-index: 9;
      cursor: pointer;
    }
  }

  :deep(.el-tabs__content) {
    padding: 10px;
  }
}

.small {
  width: 16px !important;
  border: none !important;
  .el-tabs {
    display: none;
  }
}

.search-drag-box {
  margin: 0 1px;
  flex-shrink: 0;
  width: 10px;
  height: 100%;
  cursor: col-resize;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;

  .dragImg {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .dargIcon {
      font-size: 29px;
      transform: rotate(90deg);
    }
  }
}
</style>
